<template>
  <div class="wrap">
    <el-dialog
      class="info-dialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="修改信息"
      :visible.sync="infoDialog.showDialog"
      width="50%"
    >
      <div>
        <div class="desc">备注：</div>
        <el-input
          class="note-input"
          v-model="infoDialog.note"
          placeholder="请输入内容"
        ></el-input>
      </div>
      <div>
        <div class="desc">售卖单价：</div>
        <el-input-number
          class="note-input"
          v-model="infoDialog.salePrice"
          controls-position="right"
          :precision="2"
          :min="0.01"
          :step="0.01"
        />
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="infoDialog.showDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitInfoDialog">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      class="input-dialog"
      :title="inputDialog.title"
      :visible.sync="inputDialog.showDialog"
      width="50%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="item">
        <div class="desc">数量：</div>
        <div class="amount">
          <el-input-number
            v-model="inputDialog.amount"
            controls-position="right"
            :min="1"
          />
        </div>
      </div>
      <div class="item">
        <div class="desc">单价：</div>
        <div class="price">
          <el-input-number
            v-model="inputDialog.price"
            controls-position="right"
            :precision="2"
            :min="0.01"
            :step="0.01"
          />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="inputDialog.showDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitInputStore">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="detail.title"
      :visible.sync="detail.showDialog"
      width="80%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      class="detail-dialog"
    >
      <div class="content">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in detail.activities"
            :key="index"
            :timestamp="activity.timestamp"
          >
            {{ activity.content }}
            <el-button
              @click="deleteDetailItem"
              v-if="index === detail.activities.length - 1"
              type="danger"
              icon="el-icon-delete"
              circle
            ></el-button>
          </el-timeline-item>
        </el-timeline>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="detail.showDialog = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      class="output-dialog"
      :title="outputDialog.title"
      :visible.sync="outputDialog.showDialog"
      width="50%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="item">
        <div class="desc">数量：</div>
        <div class="amount">
          <el-input-number
            v-model="outputDialog.amount"
            controls-position="right"
            :min="1"
            :max="outputDialog.max"
          />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="outputDialog.showDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitOutputStore">确 定</el-button>
      </span>
    </el-dialog>

    <el-button type="success" @click="refreshStore">刷新存库</el-button>
    <el-popover
      width="400"
      trigger="click"
      title="自动生成试轴器"
      v-model="showPopover"
    >
      <div>
        <span class="desc">试轴器行数：</span>
        <el-input-number v-model="testerRow" :min="1"></el-input-number>
      </div>
      <div>
        <span class="desc">试轴器列数：</span>
        <el-input-number v-model="testerCol" :min="1"></el-input-number>
      </div>
      <div style="text-align: right; margin: 0">
        <el-button type="primary" size="mini" @click="autoProduceTester"
          >确定创建</el-button
        >
      </div>
      <el-button type="warning" slot="reference">自动生成试轴器</el-button>
    </el-popover>

    <div class="search-row">
      <el-input
        placeholder="请输入内容"
        v-model="searchWord"
        @change="refreshList"
        class="search-word"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="refreshList"
        ></el-button>
      </el-input>
      <el-select v-model="switchType" placeholder="轴体类型" @change="changeSwitchType">
        <el-option
          v-for="item in switchOptionList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <el-table
      @sort-change="sortChange"
      :data="list"
      style="width: 100%"
      @row-dblclick="openDetailDialog"
    >
      <el-table-column label="序号" width="120" prop="index" />
      <el-table-column label="轴体名称" width="180" prop="switchSimpleName" />
      <el-table-column label="代工厂" width="100" prop="manufacturerName" />
      <el-table-column label="作者" width="80" prop="authorName" />
      <el-table-column label="轴体类型" width="80" prop="switchType" />
      <el-table-column label="单价" width="80" sortable="custom" prop="price" />
      <el-table-column label="售卖价格" width="80" prop="salePrice" />
      <el-table-column
        label="数量"
        sortable="custom"
        width="120"
        prop="amount"
      />
      <el-table-column label="备注" width="120" prop="note" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            :disabled="scope.row.amount == 0"
            type="info"
            @click="openOutputStore(scope.$index, scope.row)"
            >出库</el-button
          >
          <el-button
            size="mini"
            type="warning "
            @click="openInputStore(scope.$index, scope.row)"
            >入库</el-button
          >
          <el-popover placement="top" width="160" trigger="click">
            <el-input-number
              v-model="upwardNumber"
              :min="1"
              style="width: 160px; margin-bottom: 5px"
            ></el-input-number>
            <div style="text-align: right; margin: 0">
              <el-button
                type="primary"
                size="mini"
                @click="upward(scope.$index, scope.row)"
                >确定</el-button
              >
            </div>
            <el-button
              size="mini"
              :disabled="scope.$index == 0"
              type="success"
              slot="reference"
              >上移</el-button
            >
          </el-popover>
          <el-popover placement="top" width="160" trigger="click">
            <el-input-number
              v-model="downwardNumber"
              :min="1"
              style="width: 160px; margin-bottom: 5px"
            ></el-input-number>
            <div style="text-align: right; margin: 0">
              <el-button
                type="primary"
                size="mini"
                @click="downward(scope.$index, scope.row)"
                >确定</el-button
              >
            </div>
            <el-button
              size="mini"
              :disabled="scope.$index == list.length - 1"
              slot="reference"
              type="primary"
              >下移</el-button
            >
          </el-popover>

          <el-button
            size="mini"
            type="danger"
            @click="openInfoDialog(scope.$index, scope.row)"
            >修改信息</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import {
  Button,
  Table,
  TableColumn,
  Input,
  Dialog,
  InputNumber,
  Timeline,
  TimelineItem,
  Popover,
  Select,
  Option
} from "element-ui";
import {
  refreshAdminSwitchStore,
  getAdminSwitchStoreList,
  upwardAdminSwitchStore,
  downwardAdminSwitchStore,
  updateAdminSwitchStoreInfo,
  inputAdminSwitchStore,
  outputAdminSwitchStore,
  getAdminSwitchStoreDetail,
  deleteAdminSwitchStoreItem
} from "@/api/store_switch.js";

import { autoAdminProduceTester } from "@/api/admin-tester.js";

import { getSwitchTypeList } from "@/api/switch-type.js";
export default {
  name: "store-switch",
  components: {
    [Button.name]: Button,
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
    [Input.name]: Input,
    [Dialog.name]: Dialog,
    [InputNumber.name]: InputNumber,
    [Timeline.name]: Timeline,
    [TimelineItem.name]: TimelineItem,
    [Popover.name]: Popover,
    [Select.name]: Select,
    [Option.name]: Option
  },
  data() {
    return {
      list: [],
      searchWord: null,
      orderByAmount: null,
      orderByPrice: null,
      infoDialog: {
        showDialog: false,
        id: null,
        note: null,
        salePrice: 0
      },
      inputDialog: {
        showDialog: false,
        title: null,
        id: null,
        amount: null,
        price: null
      },
      outputDialog: {
        showDialog: false,
        title: null,
        id: null,
        amount: null,
        max: null
      },
      detail: {
        showDialog: false,
        title: null,
        id: null,
        activities: []
      },
      upwardNumber: 1,
      downwardNumber: 1,
      testerRow: 1,
      testerCol: 1,
      showPopover: false,
      switchOptionList: [],
      switchType: null
    };
  },
  mounted() {
    this.refreshList();
    getSwitchTypeList({
      searchWord: null
    })
      .then(res => {
        this.switchOptionList.push({
          value: -1,
          label: "全部类型轴体"
        });
        res.forEach(item => {
          this.switchOptionList.push({
            value: item.id,
            label: item.name
          });
        });
        this.switchType = -1;
      })
      .catch(errMsg => this.$alert(errMsg.msg));
  },
  methods: {
    refreshList() {
      getAdminSwitchStoreList({
        searchWord: this.searchWord,
        switchType: this.switchType,
        orderByAmount: this.orderByAmount,
        orderByPrice: this.orderByPrice
      })
        .then(res => {
          res.forEach((item, index) => (item.index = index + 1));
          this.list = res;
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    changeSwitchType() {
      this.refreshList();
    },
    refreshStore() {
      refreshAdminSwitchStore()
        .then(res => {
          this.refreshList();
          this.$alert("更新库存成功");
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    openOutputStore(index, row) {
      this.outputDialog.showDialog = true;
      this.outputDialog.title = `${row.switchSimpleName}-出库`;
      this.outputDialog.id = row.id;
      this.outputDialog.amount = 1;
      this.outputDialog.max = row.amount;
    },
    submitOutputStore(index, row) {
      outputAdminSwitchStore({
        id: this.outputDialog.id,
        amount: this.outputDialog.amount
      })
        .then(res => {
          this.refreshList();
          this.outputDialog.showDialog = false;
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    openInputStore(index, row) {
      this.inputDialog.id = row.id;
      this.inputDialog.amount = row.amount;
      this.inputDialog.price = row.price;
      this.inputDialog.showDialog = true;
      this.inputDialog.title = `${row.switchSimpleName}-入库`;
    },
    submitInputStore() {
      inputAdminSwitchStore({
        id: this.inputDialog.id,
        amount: this.inputDialog.amount,
        price: this.inputDialog.price
      })
        .then(res => {
          this.refreshList();
          this.inputDialog.showDialog = false;
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    upward(index, row) {
      upwardAdminSwitchStore(row.id, this.upwardNumber)
        .then(res => this.refreshList())
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    downward(index, row) {
      downwardAdminSwitchStore(row.id, this.downwardNumber)
        .then(res => this.refreshList())
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    openInfoDialog(index, row) {
      this.infoDialog.note = row.note;
      this.infoDialog.id = row.id;
      this.infoDialog.showDialog = true;
      this.infoDialog.salePrice = row.salePrice;
    },
    submitInfoDialog() {
      updateAdminSwitchStoreInfo({
        id: this.infoDialog.id,
        note: this.infoDialog.note,
        salePrice: this.infoDialog.salePrice
      })
        .then(res => {
          this.refreshList();
          this.infoDialog.showDialog = false;
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    openDetailDialog(row) {
      this.detail.title = `${row.switchSimpleName}-出入库详情`;

      this.detail.id = row.id;
      this.showDetail();
    },
    showDetail() {
      getAdminSwitchStoreDetail(this.detail.id)
        .then(res => {
          this.detail.activities = [];
          res.forEach(item => {
            this.detail.activities.push({
              content: `${item.desc}-${item.amount}颗，库存${item.balance}颗`,
              timestamp: item.createTimeDesc
            });
          });
          this.detail.showDialog = true;
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    deleteDetailItem() {
      deleteAdminSwitchStoreItem(this.detail.id)
        .then(res => {
          this.showDetail();
          this.refreshList();
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    sortChange(params) {
      let { prop, order } = params;
      if (prop == "amount") {
        this.orderByAmount = order;
        this.orderByPrice = null;
      } else if (prop == "price") {
        this.orderByPrice = order;
        this.orderByAmount = null;
      }
      this.refreshList();
    },
    autoProduceTester() {
      autoAdminProduceTester({
        row: this.testerRow,
        col: this.testerCol,
        searchWord: this.searchWord,
        switchType: this.switchType,
        orderByAmount: this.orderByAmount,
        orderByPrice: this.orderByPrice
      })
        .then(res => {
          this.showPopover = false;
          this.$alert("自动生成试轴器成功");
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    }
  }
};
</script>
<style lang="stylus" scoped>
.wrap {
  .info-dialog {
    .desc {
      position: absolute;
      width: 80px;
      line-height: 40px;
    }

    .note-input {
      width: 250px;
      padding-left: 80px;
      margin-bottom: 10px;
    }
  }

  .input-dialog {
    .item {
      margin-bottom: 5px;

      .desc {
        width: 80px;
        position: absolute;
        line-height: 40px;
      }

      .amount {
        padding-left: 80px;
      }

      .price {
        width: 180px;
        padding-left: 80px;
      }
    }
  }

  .output-dialog {
    .item {
      .desc {
        width: 80px;
        position: absolute;
        line-height: 40px;
      }

      .amount {
        padding-left: 80px;
      }
    }
  }

  .detail-dialog {
    .content {
      padding-top: 5px;
      height: 400px;
      overflow: auto;
    }
  }

  .search-row {
    padding-top: 5px;

    .search-word {
      width: 400px;
    }
  }

  .el-button {
    margin-right: 5px;
    margin-left: 0;
  }

  .auto-produce-tester {
    .row {
      margin-bottom: 5px;
    }
  }
}
</style>